<template>
  <div>
    <div class="login-index">
      <div class="content">
        <div class="left-img">
          <img src="../assets/images/login/leftImg999.png" />
          <div class="left">
            <div class="top">Welcome To iBEMLab</div>
            <div class="text">Intelligent Built Environment Monitor Laboratory</div>
            <div class="text">智能室内建筑环境监测与预警系统设计专家</div>
          </div>
        </div>
        <div class="right-box">
          <div class="logo">
            <img src="../assets/images/login/logo.png" />
          </div>
          <div class="login-content">
            <div class="title">欢迎注册</div>
            <div class="tips"><!--欢迎登录iBEM Lab管理系统！--></div>
            <div>
              <el-form ref="formRef"
                       :model="ruleForm"
                       :rules="rules"
                       class="demo-ruleForm">
                <el-form-item prop="user"
                              style="margin-bottom: 20px">
                  <el-input v-model="ruleForm.name"
                            prefix-icon="el-icon-user-solid"
                            maxlength="50"
                            placeholder="请输入用户名"
                            class="myClass-login" />
                </el-form-item>
                <el-form-item prop="email"
                              style="margin-bottom: 20px">
                  <el-input v-model="ruleForm.email"
                            prefix-icon="el-icon-user-solid"
                            maxlength="50"
                            placeholder="请输入邮箱"
                            class="myClass-login" />
                </el-form-item>
                <el-form-item prop="passwd"
                              style="margin-bottom: 20px"
                              prefix-icon="el-icon-user-solid">
                  <el-input v-model="ruleForm.passwd"
                            type="password"
                            maxlength="16"
                            placeholder="请输入密码"
                            class="myClass-login" />
                </el-form-item>
                <el-form-item prop="confirmPasswd"
                              style="margin-bottom: 20px"
                              prefix-icon="el-icon-user-solid"
                              class="myClass-login">
                  <el-input v-model="ruleForm.confirmPasswd"
                            type="password"
                            maxlength="16"
                            placeholder="请输入确认密码"
                            class="myClass-login" />
                </el-form-item>
                <el-form-item>
                  <div @click="submitForm('formRef')"
                       class="login-btn">
                    注册
                  </div>
                </el-form-item>
                <div class="or-box">
                  <div class="line"></div>
                  <div class="text">or</div>
                  <div class="line"></div>
                </div>
                <el-form-item>
                  <div @click="goLogin"
                       class="register-btn">
                    登录
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="content">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="12">
          <div class="title">IBEM管理系统</div>
        </el-col>
        <el-col :span="12" style="text-align: end">
          <div class="title">
            <img src="@/assets/images/login/logo.jpg" class="logo" />
          </div>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="14">
          <img src="@/assets/images/login/zuo.png" class="imageLeft" />
        </el-col>
        <el-col :span="10" class="login-form-tem">
          <div class="from-content">
            <div class="tips-group">
              <span class="login-title">欢迎注册</span>
              <span class="regist-button" @click="goLogin">登录账号</span>
            </div>

            <el-form ref="formRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
              <el-form-item prop="name" style="margin-bottom: 20px">
                <el-input
                  v-model="ruleForm.name"
                  maxlength="50"
                  placeholder="请输入用户名"
                  class="myClass-login"
                />
              </el-form-item>
              <el-form-item prop="email" style="margin-bottom: 20px">
                <el-input
                  v-model="ruleForm.email"
                  maxlength="50"
                  placeholder="请输入邮箱"
                  class="myClass-login"
                />
              </el-form-item>
              <el-form-item prop="passwd" style="margin-bottom: 25px" class="myClass-login">
                <el-input
                  v-model="ruleForm.passwd"
                  type="password"
                  maxlength="16"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item prop="confirmPasswd" style="margin-bottom: 25px" class="myClass-login">
                <el-input
                  v-model="ruleForm.confirmPasswd"
                  type="password"
                  maxlength="16"
                  placeholder="请输入确认密码"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="login-btn"
                  :loading="btnLoading"
                  @click="submitForm('formRef')"
                >注册</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <img src="@/assets/images/login/flw.png" class="flw" />
    </div> -->
  </div>
</template>

<script>
import { Message } from "element-ui";
import { checkEmail } from "@/utils/common";
import { register } from "@/api/user";
export default {
  name: "Login",
  components: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.passwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        /*displayName: [
          { required: true, message: "请输入昵称", trigger: "blur" }
        ],*/
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" }
        ],
        passwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPasswd: [{ validator: validatePass2, trigger: "blur" }]
      },
      checked: true,
      btnLoading: false,
      captchaImg: ""
    };
  },
  methods: {
    agreementFun(type) {
      this.$router.push({ path: "/agreement", query: { type } });
    },
    goLogin() {
      this.$router.push("/login");
    },
    findAccountFun() {
      this.$router.push("/findAccount");
    },
    findPasswordFun() {
      this.$router.push("/findPassword");
    },
    submitForm(formName) {
      if (!this.checked) {
        Message("未同意用户协议与隐私政策");
        return;
      }
      this.btnLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.btnLoading = false;
          register(this.ruleForm).then(res => {
            if (res.code == "200") {
              Message.success("注册成功，请登录邮箱进行激活！");
              this.$router.replace("/login");
            }
          });
        } else {
          this.btnLoading = false;
          //console.log("error submit!!");

          return false;
        }
      });
    }
  }
};
</script>


<style lang="scss">
.login-index {
  .el-input__icon {
    font-size: 20px !important;
  }
  .el-input__inner {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 18px !important;
    padding-left: 35px;
  }
  .content {
    display: flex;
    .left-img {
      /*img {
        height: 100vh;
      }*/
      .left {
        position: absolute;
        top: 20%;
        left: 2%;
        text-align: left;
        .top {
          font-weight: 800;
          font-size: 40px;
          line-height: 66px;
          color: #ffffff;
        }
        .text {
          font-weight: 400;
          font-size: 20px;
          line-height: 40px;
          color: #ffffff;
        }
      }
    }
    .right-box {
      padding-top: 50px;
      flex: 1;
      .logo {
        display: flex;
        align-items: center;
        img {
          margin: auto;
        }
      }
      .login-content {
        padding-top: 100px;
        width: 430px;
        margin: auto;
        .title {
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 700;
          font-size: 36px;
          line-height: 48px;
          /* identical to box height */

          color: #000000;
        }
        .tips {
          font-family: "Space Grotesk";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 26px;
          margin-bottom: 20px;
          /* identical to box height */

          /* 03黑白灰 */

          color: #636e78;
        }
        .forget-pwd {
          float: right;
          cursor: pointer;
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          text-decoration-line: underline;
          color: #000000;
          /* Inside auto layout */
          flex: none;
          order: 1;
          flex-grow: 0;
        }
        .login-btn {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 20px 36px;
          width: 430px;
          height: 60px;
          font-size: 18px;
          line-height: 24px;
          /* identical to box height */

          color: #ffffff;

          background: linear-gradient(90deg, #1d99ef 0%, #4cca9c 104.69%),
            #004788;
          border-radius: 6px;
        }
        .register-btn {
          margin-top: 22px;
          box-sizing: border-box;

          /* 自动布局 */

          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 20px 36px;
          width: 430px;
          height: 60px;

          /* 04黑白灰 */

          border: 1px solid #a7afb7;
          border-radius: 6px;
        }
        .or-box {
          font-family: "Space Grotesk";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 26px;
          /* identical to box height */
          display: flex;
          align-items: center;
          text-align: center;
          color: #7a7a7a;
          .line {
            display: inline-block;
            width: 200px;
            height: 0px;
            border: 1px solid #e0e0e0;
          }
          .text {
            margin: 0 4px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  .right-box {
    scale: 0.9;
  }
}
</style>
